<template>
  <el-dialog
    v-el-drag-dialog
    :title="title"
    :visible.sync="visible"
    width="750px"
    @closed="reset"
  >
    <el-form ref="form" label-width="80px" class="form" :model="temp">
      <el-form-item label="计划编号" prop="name">
        <el-input v-model="temp.name" placeholder="请输入" disabled>
          <el-button slot="append" class="append-search">获取</el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="计划名称" prop="name">
        <el-input v-model="temp.name" placeholder="请输入" clearable disabled />
      </el-form-item>
      <el-form-item label="配送时间" :table-form-merge="2" class="merge-item">
        <el-input-number v-model="temp.num" controls-position="right" :min="0" :max="23" disabled />
      </el-form-item>
      <el-form-item label="配送周期" :table-form-merge="2" class="merge-item">
        <el-input v-model="temp.value" disabled />
      </el-form-item>
      <el-form-item prop="remark" class="block">
        <label slot="label">备&emsp;&emsp;注</label>
        <el-input v-model="temp.remark" type="textarea" :rows="2" maxlength="255" show-word-limit />
      </el-form-item>
    </el-form>
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="配送商品" name="first">
        <el-form ref="form" size="mini" label-width="80px" class="goodsForm" :model="goods">
          <el-form-item label="商品分类:" prop="address">
            <el-tree-select
              v-model="goods.goodsType"
              :clearable="false"
              class="tree-select"
              :select-params="{
                clearable: true,
                placeholder: '请选择商品类型',
                loading: $loadingPlugin.getTreeData
              }"
              :tree-params=" {
                'expand-on-click-node': false,
                'highlight-current': true,
                props:{
                  value:'gtId',
                  label: 'gtName',
                  disabled: 'disabled',
                },
                data: treeData
              }"
              @node-click="selectTreeChange"
            />
          </el-form-item>
          <el-form-item label="商品名称:" prop="address">
            <el-select v-model="goods.goodName" placeholder="请选择">
              <el-option :value="1" label="地址1" />
              <el-option :value="2" label="地址2" />
              <el-option :value="3" label="地址3" />
            </el-select>
          </el-form-item>
          <el-form-item style="width: 20%;" class="btn" label-width="20px">
            <el-button type="primary" @click="addGoods">添加</el-button>
          </el-form-item>
        </el-form>
        <lb-table
          ref="lbTable"
          class="tableOrder"
          highlight-current-row
          max-height="400"
          element-loading-text="加载中"
          :column="tableData.column"
          :data="tableData.data"
          :pagination="false"
          :total="tableData.total"
        />
      </el-tab-pane>
      <el-tab-pane label="配送客户" name="second">
        <peiSongUser ref="peisongUser" :title="title" />
      </el-tab-pane>
    </el-tabs>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">
        关闭
      </el-button>
      <el-button :loading="$loadingPlugin.add || $loadingPlugin.edit" type="primary" @click="success">
        保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { goodsTypeQueryList } from '@/api'
  import getTreeData from '@/utils/jsonTree'
  export default {
    name: 'add',
    components: {
      peiSongUser: require('./peisongUser').default
    },
    data() {
      return {
        visible: false,
        title: '计划详情',
        activeName: 'first',
        treeData: [],
        tableData: {
          column: [
            { label: '商品类型', prop: 'gtName', width: 150 },
            { label: '商品编号', prop: 'goodsCode', width: 100 },
            { label: '商品名称', prop: 'goodsName', width: 200 },
            { label: '单位', prop: 'unitName', width: 80, align: 'center' },
            { label: '配送数量', prop: 'sendCount', width: 100, align: 'right',
              render: (h, { row, $index }) => <el-input oninput={(e) => this.changeNum(row, $index, e)} v-model={row.gcount}></el-input>
            },
            { label: '操作', prop: 'sendCount', width: 100, align: 'right', fixed: 'right',
              render: (h, { row, $index }) => <el-link type='danger' onClick={() => { this.del($index) }}> 删除</el-link>
            }
          ],
          data: []
        },
        goods: {

        },
        temp: {
          select: 1,
          csmPhone: '',
          orderCode: '',
          csmName: '',
          address: '',
          addScores: '',
          price: '',
          time: '',
          remark: ''
        },
        rules: {
          csmPhone: [{ required: true, message: '请输入', trigger: 'change' }],
          csmName: [{ required: true, message: '请输入用户编码', trigger: 'change' }],
          orderCode: [{ required: true, message: '请输入押金单号', trigger: 'change' }],
          address: [{ required: true, message: '请选择投保地址', trigger: 'change' }],
          price: [{ required: true, message: '请输入投保金额', trigger: 'change' }]
        }
      }
    },
    mounted() {
      this.getTreeData()
    },
    methods: {
      // 获取树图数据
      async getTreeData() {
        const res = await goodsTypeQueryList({})
        const data = res.data.map(item => ({
          label: item.gtName,
          ...item
        }))
        this.treeData = getTreeData(data, null, 'gtId')
      },
      selectTreeChange(val) {
        console.log(val)
        this.goods.gtName = val.gtName
      },
      select(val) {
        console.log(val)
      },
      addGoods() {
        console.log(this.goods.goodsType)
        this.tableData.data.push({ ...this.goods })
      },
      // 选择数量
      changeNum(row, index) {
        // console.log(row)
        // console.log(index)
        const value = event.target.value
        row.gcount = value
      },
      del(index) {
        this.tableData.data.splice(index, 1)
      },
      open(temp) {
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
          if (temp) {
            this.temp = Object.assign(this.temp, temp)
            this.type = 'edit'
          }
        })
      },
      success() {
        this.$refs.dataForm.validate(valid => {
          if (!valid) return
          if (this.type === 'add') {
            this.add()
          } else {
            this.edit()
          }
        })
      },
      async add() {
        // await roleAdd(this.temp)
        this.resolve()
        this.visible = false
        this.$notify({
          title: '提示',
          message: '新增成功',
          type: 'success',
          duration: 2000
        })
      },
      async edit() {
        // await roleUpdate(this.temp)
        this.resolve(this.temp)
        this.visible = false
        this.$notify({
          title: '提示',
          message: '更新成功',
          type: 'success',
          duration: 2000
        })
      },
      reset() {
        this.type = 'add'
        this.temp = {
          select: 1,
          csmPhone: '',
          orderCode: '',
          csmName: '',
          address: '',
          addScores: '',
          price: '',
          time: '',
          remark: ''
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
.form {
  display: flex;
  flex-wrap: wrap;
  & /deep/ .el-form-item {
    width: 50%;
    padding-right: 10px;
    .el-form-item__content > .el-select {
      width: 100%;
    }
  }
  .block {
    width: 100%;
  }
}
.goodsForm {
  display: flex;
  flex-wrap: wrap;
  & /deep/ .el-form-item {
    width: 40%;
    padding-right: 10px;
    .el-form-item__content > .el-select {
      width: 100%;
    }
  }
  .block {
    width: 100%;
  }
}
.info-title {
  display: flex;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 20px;
  .title-icon {
    display: inline-block;
    width: 4px;
    height: 18px;
    margin-right: 6px;
    background: $themeColor;
  }
  span {
    font-weight: 700;
    color: $themeColor;
  }
}
</style>
